<template>
	<view class="images-wrapper">
		<view class="image-item"  v-for="(item, index) in value"  :key="item" >
			<image class="image" :src="item | formatFile" mode=""></image>
			<image src="/static/images/icon-del.png" class="icon-del" mode="" @tap="delImage(index)"></image>
		</view>
		<view class="image-item">
			<image class="image" src="/static/images/icon-upload-img.png" mode="" v-if="limit == -1 || value.length < limit" @tap="addImage"></image>
		</view>
		<view class="count-text" v-if="limit != -1">
			({{value.length}} / {{limit}})
		</view>
	</view>
</template>

<script>
	import { uploadImage } from '@/utils/upload.js'
	export default {
		name:"UploadImages",
		props:{
			value: {
				default: []
			},
			limit: {
				default: -1
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			addImage(){
				uploadImage((res) => {
					console.log(res);
					this.value.push(res.message)
					this.$emit('input', this.value)
				})
			},
			delImage(index){
				this.value.splice(index, 1);
				this.$emit('input', this.value)
			}
		}
	}
</script>

<style lang="scss">
	.images-wrapper{
		display: flex;
		flex-wrap: wrap;
		
		.image-item{
			position: relative;
			width: 140rpx;
			height: 140rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			
			.image{
				width: 100%;
				height: 100%;
			}
			
			.icon-del{
				position: absolute;
				right: -15rpx;
				top: -15rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		
		.image-item:nth-of-type(4n){
			margin-right: 0;
		}
	}
	
	.count-text{
		align-self: flex-end;
		font-size: 27rpx;
		color: #808080;
		margin-bottom: 20rpx;
	}
</style>